﻿@page "/DateTime-Picker/Forms-Validation"

@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;


@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample is used to validate form using the Data Annotation. Type the date and time in the input element or choose a date from the calendar popup and time from the timepicker popup. If the input value is a valid date time value, then the given input will be ready to submit. Otherwise, an error message will be shown until you enter or choose the valid date time.</p>
</SampleDescription>
<ActionDescription>
    <p>The form enables the validation with data annotation attributes by clicking on the submit externally. All rules are validated by the DataAnnotationsValidator.</p>
    <p>The above date time field is configured with the following rules.</p>
    <table style='width:100%'>
        <tr>
            <th>Field</th>
            <th>Rule</th>
        </tr>
        <tr>
            <td style="padding-right:20px">Required</td>
            <td>The field must have a valid date time value.</td>
        </tr>
        <tr>
            <td style="vertical-align: top">Range</td>
            <td>The field must have a date time value within the given range. The date time should be between 5 March 2021, 9 AM and 25 March 2021, 6 PM.</td>
        </tr>
    </table>
</ActionDescription>

<div class="control-section">
    <div id="wrapper" class="datetimepicker-section">
        <div id="datetimepicker-control">
            @if (string.IsNullOrEmpty(Message))
            {
            <EditForm Model="@annotation" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
                <DataAnnotationsValidator />
                <div class="form-group">
                    <SfDateTimePicker id='DateTimePick' Placeholder="Select a Start Date and Time" @bind-Value="@annotation.StartDateTime" Min="@MinDate" Max="@MaxDate"></SfDateTimePicker>
                    <ValidationMessage For="@(() => annotation.StartDateTime)" />
                </div>
                <div class="sfButton">
                    <SfButton type="submit" IsPrimary="true">Submit</SfButton>
                </div>
            </EditForm>
            }
            else
            {
                <div class="alert alert-success">
                    @Message
                </div>
            }
        </div>
    </div>
</div>
<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .sfButton {
        padding-top: 10px;
        display: flex;
        justify-content: center;
    }

    .validation-message {
        color: red;
        padding-top: 5px;
    }
</style>
@code {
    private string Message = string.Empty;
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        annotation.StartDateTime = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
    private Annotation annotation = new Annotation();
    private DateTime MinDate { get; set; } = new DateTime(2021,3,1,10,00,00);
    private DateTime MaxDate { get; set; } = new DateTime(2021, 3, 31, 10, 00, 00);
    public class Annotation
    {
        [Required(ErrorMessage = "The Date field is required.")]
        [Range(typeof(DateTime), "3/5/2021 9:00:00", "3/25/2021 18:00:00", ParseLimitsInInvariantCulture = true, ErrorMessage = "The date should be between 5 March 2021, 9 AM and 25 March 2021, 6 PM.")]
        public DateTime? StartDateTime { get; set; } = null;
    }
}